import { processData } from '@/utils/tree';
import { Button, Input, message, Modal, ModalProps, Space, TreeSelect } from 'antd';
import { memo, useEffect, useState } from 'react';
import datasetService from '@/api/services/datasetService';
import { useParams } from '@/router/hooks';
import Modals from '@/components/modals/Modals';
interface Props {
  editType: string;
  onConfirm: (name: string, treeDataValue: string) => void;
  updateDataset?: any
}

const NewDatasetModal = ({ editType, open, onConfirm, onCancel, title, updateDataset }: Props & ModalProps) => {
  const [datasetName, setDatasetName] = useState<string>('');
  const [treeDataValue, setTreeDataValue] = useState('');
  const { appId = '' } = useParams() as { appId: string };
  useEffect(() => {
    if (editType == 'dataset') {
      setDatasetName('');
      setTreeDataValue('');
    } else {
      setDatasetName(updateDataset?.name);
      setTreeDataValue(updateDataset?.group_id);
    }
  }, [open]);
  // useEffect(() => {
  //   getSelectKnowledgeBaseList()
  // }, []);

  // const [treeData, setTreeData] = useState([])
  // const onChange = (newValue: string) => {
  //   setTreeDataValue(newValue)
  // };

  //获取选择知识库列表
  // const getSelectKnowledgeBaseList = async () => {
  //   try {
  //     const res = await datasetService.knowledgeBaseSelect({
  //       page: 0,
  //       page_size: 0,
  //       id: appId || '67fcd7c1de9ddb56bea37b6c',
  //     })
  //     setTreeData(processData(res))
  //   } catch (error) {
  //     message.error(error instanceof Error ? error.message : String(error))
  //   }
  // }

  return (
    <Modals
      title={
        <div >
          {editType !== 'update' && '新建'}{title ? title : editType == 'dataset' ? '知识库' : '文件夹'}
        </div>
      }
      open={open}
      onOk={() => {
        onConfirm(datasetName, treeDataValue);
      }}
      onCancel={(e) => {
        onCancel && onCancel(e);
        setDatasetName('');
        setTreeDataValue('');
      }}
      okText="确定"
      cancelText="取消"
      width={500}
    // footer={
    //   <div style={{ textAlign: 'center' }}>
    //     <Space size={36}>
    //       <Button onClick={onCancel}>取消</Button>
    //       <Button
    //         type="primary"
    //         onClick={() => {
    //           onConfirm(datasetName, treeDataValue);
    //         }}
    //       >
    //         确定
    //       </Button>
    //     </Space>
    //   </div>
    // }
    >
      <div >
        <div className='my-2'>数据接口集名称</div>
        <Input placeholder='请输入数据接口集名称' value={datasetName} onChange={(e) => setDatasetName(e.target.value?.trim())} />
        {/* <div className='my-4'>归属组织</div>
        <TreeSelect
          showSearch
          style={{ width: '100%' }}
          value={treeDataValue}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          allowClear
          treeDefaultExpandAll
          onChange={onChange}
          treeData={treeData}
        />
        <div className='my-4 text-[#c7cdd8]'>注:仅该组织的管理人员可见此数据接口集</div> */}
      </div>
    </Modals>
  );
};

export default memo(NewDatasetModal);
